/*/
 * 添加网页头部导航栏和搜索框样式和事件
 * By 张剑锋
/*/

let ipt=null
let btn=null
let pop=null

function addHeadHTML(){
    document.body.innerHTML="\
    <div id='nav'>\
        <div>\
            <a href='https://book.douban.com/'>豆瓣读书</a>\
            <a href='https://yuedu.baidu.com/'>百度阅读</a>\
            <a href='https://www.qidian.com/'>起点中文网</a>\
            <a href='http://chuangshi.qq.com/'>创世中文网</a>\
            <a href='http://www.zongheng.com/'>纵横中文网</a>\
        </div>\
        <a id='sign'>登录/注册</a>\
    </div>\
    <div id='top'>\
        <div>\
            <div onclick=\"location='../home/index.html'\">\
                <img src='../img/logo.png'>\
                <a>黑眼圈小说网</a>\
            </div>\
            <div>\
                <div>\
                    <input id='ipt' placeholder='书名、作者' />\
                    <div id='btn'>\
                        <div></div>\
                        <div></div>\
                        <div></div>\
                        <div></div>\
                    </div>\
                </div>\
                <div>\
                    <div id='pop'></div>\
                </div>\
            </div>\
            <a href='https://www.bilibili.com'>登录/注册</a>\
        </div>\
    </div>"
}
function initHeadOnload(){
    ipt=document.getElementById('ipt');
    btn=document.getElementById('btn')
    pop=document.getElementById('pop')
    addSearchListeners()
}
function addSearchListeners(){
    let log={key:'',out:true}
    ipt.oninput=()=>{
        let val=ipt.value
        setTimeout(()=>{
            if(val==ipt.value&&val!=log.key)
                if((log.key=val).length)
                    instantSearch(val)
                else
                    hideInstantItems()
        },600)
    }
    ipt.onblur=()=>{
        if(log.out)
            hideInstantItems()
    }
    btn.onclick=()=>{
        let v=ipt.value
        if(v.length)
            clickedSearch(v)
    }
    pop.onmouseenter=()=>log.out=false
    pop.onmouseleave=()=>log.out=true
}

/*TODO*/
function clickedSearch(s){/*TODO*/
    console.log('ClickedSearch: '+s)
    //跳转到Search页进行搜索并展示
    window.open(`../srch?key=${s}`)
}
function instantSearch(s){/*TODO*/
    console.log('InstantSearch: '+s)

    let data=new FormData()
    let xhr=new XMLHttpRequest()
    data.append('search',s)
    xhr.open('GET','url')
    // xhr.send(data)
    xhr.onload=()=>{
        if(xhr.status==200){}
    }

    showInstantItems(instantItems)
}
function hideInstantItems(){
    showInstantItems([])
}
function showInstantItems(data){
    Array.from(pop.children).forEach(e=>{
        pop.removeChild(e)
    })
    if(data.length){
        data.forEach(v=>{
            let a=document.createElement('div')
            let b=document.createElement('img')
            let c=document.createElement('div')
            let d=document.createElement('a')
            let e=document.createElement('a')
            pop.appendChild(a)
            a.appendChild(b)
            a.appendChild(c)
            c.appendChild(d)
            c.appendChild(e)
            a.onclick=()=>
                location.href=`../srch?key=${v.id}`
            b.src=v.img
            d.innerText=v.name
            e.innerText=v.writer
        })
        pop.style.display='block'
    }else
        pop.style.display='none'
}